import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
function TextInput(props,textInputRef){
    //在TextInput组件中，把textInputRef通过ref属必传递给了原生的input标签
    //当此原生input标签变成真实DOM后，会把真实DOM的引用地址赋给了textInputRef.current
    return <input  ref={textInputRef}/>
}
const ForwardedTextInput = React.forwardRef(TextInput);
class Form extends Component {
     //创建一个ref对象，并且赋给textInputRef属性
    textInputRef = React.createRef();//{current:null}
    getFocus = () => {
        // Cannot read properties of null (reading 'getFocus')
        this.textInputRef.current.focus();
    }
    render() {
        //我把this.textInputRef通过ref属性传递给了ForwardedTextInput组件
        //ForwardedTextInput组件可以把接收到的ref透传给TextInput的第二个参数
        return (
            <div>
                <ForwardedTextInput ref={this.textInputRef} />
                <button onClick={this.getFocus}>获取焦点</button>
            </div>
        )
    }
}
let element = <Form />
root.render(element);
